JavaScript Async Generator Helpers: Zvládnutí tvorby a správy streamů

Asynchronní programování v JavaScriptu se v průběhu let výrazně vyvinulo. S příchodem asynchronních generátorů a asynchronních iterátorů získali vývojáři mocné nástroje pro práci se streamy asynchronních dat. Nyní JavaScript Async Generator Helpers tyto schopnosti dále vylepšují a poskytují efektivnější a expresivnější způsob, jak vytvářet, transformovat a spravovat asynchronní datové streamy. Tato příručka zkoumá základy Async Generator Helpers, zabývá se jejich funkcemi a demonstruje jejich praktické aplikace na jasných příkladech.

Pochopení asynchronních generátorů a iterátorů

Než se ponoříme do Async Generator Helpers, je klíčové porozumět základním konceptům asynchronních generátorů a asynchronních iterátorů.

Asynchronní generátory

Asynchronní generátor je funkce, kterou lze pozastavit a znovu spustit, přičemž asynchronně poskytuje (yield) hodnoty. Umožňuje generovat sekvenci hodnot v čase, aniž by blokovala hlavní vlákno. Asynchronní generátory jsou definovány pomocí syntaxe async function*.

Příklad:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500)); // Simulace asynchronní operace
    yield i;
  }
}

// Použití
const sequence = generateSequence(1, 5);

Asynchronní iterátory

Asynchronní iterátor je objekt, který poskytuje metodu next(), jež vrací promise, který se resolvne na objekt obsahující další hodnotu v sekvenci a vlastnost done, která určuje, zda byla sekvence vyčerpána. Asynchronní iterátory se konzumují pomocí smyček for await...of.

Příklad:

async function* generateSequence(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 500));
    yield i;
  }
}

async function consumeSequence() {
  const sequence = generateSequence(1, 5);
  for await (const value of sequence) {
    console.log(value);
  }
}

consumeSequence();

Představení Async Generator Helpers

Async Generator Helpers jsou sadou metod, které rozšiřují funkcionalitu prototypů asynchronních generátorů. Poskytují pohodlné způsoby, jak manipulovat s asynchronními datovými streamy, čímž se kód stává čitelnějším a udržitelnějším. Tyto pomocné funkce pracují líně (lazily), což znamená, že zpracovávají data pouze tehdy, když je to potřeba, což může zlepšit výkon.

Následující Async Generator Helpers jsou běžně dostupné (v závislosti na prostředí JavaScriptu a polyfillech):

• map
• filter
• take
• drop
• flatMap
• reduce
• toArray
• forEach

Podrobný průzkum Async Generator Helpers

1. `map()`

Pomocná funkce map() transformuje každou hodnotu v asynchronní sekvenci aplikováním poskytnuté funkce. Vrací nový asynchronní generátor, který poskytuje (yield) transformované hodnoty.

Syntaxe:

asyncGenerator.map(callback)

Příklad: Převod streamu čísel na jejich druhé mocniny.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const squares = numbers.map(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100)); // Simulace asynchronní operace
    return num * num;
  });

  for await (const square of squares) {
    console.log(square);
  }
}

processNumbers();

Příklad z praxe: Představte si načítání uživatelských dat z více API a potřebu transformovat data do konzistentního formátu. map() lze použít k asynchronní aplikaci transformační funkce na každý uživatelský objekt.

async function* fetchUsersFromMultipleAPIs(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const response = await fetch(endpoint);
    const data = await response.json();
    for (const user of data) {
      yield user;
    }
  }
}

async function processUsers() {
  const apiEndpoints = [
    'https://api.example.com/users1',
    'https://api.example.com/users2'
  ];

  const users = fetchUsersFromMultipleAPIs(apiEndpoints);

  const normalizedUsers = users.map(async (user) => {
    // Normalizace formátu uživatelských dat
    return {
      id: user.userId || user.id,
      name: user.fullName || user.name,
      email: user.emailAddress || user.email
    };
  });

  for await (const normalizedUser of normalizedUsers) {
    console.log(normalizedUser);
  }
}

2. `filter()`

Pomocná funkce filter() vytváří nový asynchronní generátor, který poskytuje (yield) pouze ty hodnoty z původní sekvence, které splňují zadanou podmínku. Umožňuje selektivně zahrnout hodnoty do výsledného streamu.

Syntaxe:

asyncGenerator.filter(callback)

Příklad: Filtrování streamu čísel tak, aby obsahoval pouze sudá čísla.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 10);
  const evenNumbers = numbers.filter(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return num % 2 === 0;
  });

  for await (const evenNumber of evenNumbers) {
    console.log(evenNumber);
  }
}

processNumbers();

Příklad z praxe: Zpracování streamu záznamů z logu a odfiltrování záznamů na základě jejich úrovně závažnosti. Například zpracování pouze chyb a varování.

async function* readLogFile(filePath) {
  // Simulace asynchronního čtení souboru s logy řádek po řádku
  const logEntries = [
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' },
    { timestamp: '...', level: 'WARNING', message: '...' },
    { timestamp: '...', level: 'INFO', message: '...' },
    { timestamp: '...', level: 'ERROR', message: '...' }
  ];

  for (const entry of logEntries) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield entry;
  }
}

async function processLogs() {
  const logEntries = readLogFile('path/to/log/file.log');
  const errorAndWarningLogs = logEntries.filter(async (entry) => {
    return entry.level === 'ERROR' || entry.level === 'WARNING';
  });

  for await (const log of errorAndWarningLogs) {
    console.log(log);
  }
}

3. `take()`

Pomocná funkce take() vytváří nový asynchronní generátor, který poskytuje (yield) pouze prvních n hodnot z původní sekvence. Je užitečná pro omezení počtu zpracovávaných položek z potenciálně nekonečného nebo velmi velkého streamu.

Syntaxe:

asyncGenerator.take(n)

Příklad: Získání prvních 3 čísel ze streamu čísel.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);
  const firstThree = numbers.take(3);

  for await (const num of firstThree) {
    console.log(num);
  }
}

processNumbers();

Příklad z praxe: Zobrazení prvních 5 výsledků vyhledávání z asynchronního vyhledávacího API.

async function* search(query) {
  // Simulace načítání výsledků vyhledávání z API
  const results = [
    { title: 'Result 1', url: '...' },
    { title: 'Result 2', url: '...' },
    { title: 'Result 3', url: '...' },
    { title: 'Result 4', url: '...' },
    { title: 'Result 5', url: '...' },
    { title: 'Result 6', url: '...' }
  ];

  for (const result of results) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield result;
  }
}

async function displayTopSearchResults(query) {
  const searchResults = search(query);
  const top5Results = searchResults.take(5);

  for await (const result of top5Results) {
    console.log(result);
  }
}

4. `drop()`

Pomocná funkce drop() vytváří nový asynchronní generátor, který přeskočí prvních n hodnot z původní sekvence a poskytuje (yield) zbývající hodnoty. Je to opak funkce take() a je užitečná pro ignorování počátečních částí streamu.

Syntaxe:

asyncGenerator.drop(n)

Příklad: Přeskočení prvních 2 čísel ze streamu čísel.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const remainingNumbers = numbers.drop(2);

  for await (const num of remainingNumbers) {
    console.log(num);
  }
}

processNumbers();

Příklad z praxe: Stránkování velkého objemu dat načteného z API, přičemž se přeskočí již zobrazené výsledky.

async function* fetchData(url, pageSize, pageNumber) {
  const offset = (pageNumber - 1) * pageSize;
  // Simulace načítání dat s offsetem
  const data = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' },
    { id: 6, name: 'Item 6' },
    { id: 7, name: 'Item 7' },
    { id: 8, name: 'Item 8' }
  ];

  const pageData = data.slice(offset, offset + pageSize);

  for (const item of pageData) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield item;
  }
}

async function displayPage(pageNumber) {
  const pageSize = 3;
  const allData = fetchData('api/data', pageSize, pageNumber);
  const page = allData.drop((pageNumber - 1) * pageSize);  // přeskočení položek z předchozích stránek

  const results = page.take(pageSize);


  for await (const item of results) {
    console.log(item);
  }
}

// Příklad použití
displayPage(2);

5. `flatMap()`

Pomocná funkce flatMap() transformuje každou hodnotu v asynchronní sekvenci aplikováním funkce, která vrací asynchronní iterovatelný objekt (Async Iterable). Následně zploští výsledný asynchronní iterovatelný objekt do jednoho asynchronního generátoru. To je užitečné pro transformaci každé hodnoty na stream hodnot a následné sloučení těchto streamů.

Syntaxe:

asyncGenerator.flatMap(callback)

Příklad: Transformace streamu vět na stream slov.

async function* generateSentences() {
  const sentences = [
    'This is the first sentence.',
    'This is the second sentence.',
    'This is the third sentence.'
  ];

  for (const sentence of sentences) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield sentence;
  }
}

async function* stringToWords(sentence) {
    const words = sentence.split(' ');
    for (const word of words) {
        await new Promise(resolve => setTimeout(resolve, 50));
        yield word;
    }
}

async function processSentences() {
  const sentences = generateSentences();
  const words = sentences.flatMap(async (sentence) => {
      return stringToWords(sentence);
  });

  for await (const word of words) {
    console.log(word);
  }
}

processSentences();

Příklad z praxe: Načítání komentářů pro více blogových příspěvků a jejich sloučení do jednoho streamu pro zpracování.

async function* fetchBlogPostIds() {
  const blogPostIds = [1, 2, 3]; // Simulace načítání ID blogových příspěvků z API
  for (const id of blogPostIds) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield id;
  }
}

async function* fetchCommentsForPost(postId) {
  // Simulace načítání komentářů pro blogový příspěvek z API
  const comments = [
    { postId: postId, text: `Comment 1 for post ${postId}` },
    { postId: postId, text: `Comment 2 for post ${postId}` }
  ];
  for (const comment of comments) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield comment;
  }
}

async function processComments() {
  const postIds = fetchBlogPostIds();
  const allComments = postIds.flatMap(async (postId) => {
    return fetchCommentsForPost(postId);
  });

  for await (const comment of allComments) {
    console.log(comment);
  }
}

6. `reduce()`

Pomocná funkce reduce() aplikuje funkci na akumulátor a každou hodnotu asynchronního generátoru (zleva doprava), aby ho zredukovala na jednu hodnotu. Je to užitečné pro agregaci dat z asynchronního streamu.

Syntaxe:

asyncGenerator.reduce(callback, initialValue)

Příklad: Výpočet součtu čísel ve streamu.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const sum = await numbers.reduce(async (accumulator, num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    return accumulator + num;
  }, 0);

  console.log('Sum:', sum);
}

processNumbers();

Příklad z praxe: Výpočet průměrné doby odezvy série volání API.

async function* fetchResponseTimes(apiEndpoints) {
  for (const endpoint of apiEndpoints) {
    const startTime = Date.now();
    try {
      await fetch(endpoint);
      const endTime = Date.now();
      const responseTime = endTime - startTime;
      await new Promise(resolve => setTimeout(resolve, 50));
      yield responseTime;
    } catch (error) {
      console.error(`Error fetching ${endpoint}: ${error}`);
      yield 0; // Nebo chybu zpracujte vhodným způsobem
    }
  }
}

async function calculateAverageResponseTime() {
  const apiEndpoints = [
    'https://api.example.com/endpoint1',
    'https://api.example.com/endpoint2',
    'https://api.example.com/endpoint3'
  ];
  const responseTimes = fetchResponseTimes(apiEndpoints);

  let count = 0;
  const sum = await responseTimes.reduce(async (accumulator, time) => {
    count++;
    return accumulator + time;
  }, 0);

  const average = count > 0 ? sum / count : 0;
  console.log(`Average response time: ${average} ms`);
}

7. `toArray()`

Pomocná funkce toArray() zkonzumuje asynchronní generátor a vrátí promise, který se resolvne na pole obsahující všechny hodnoty poskytnuté (yield) generátorem. To je užitečné, když potřebujete shromáždit všechny hodnoty ze streamu do jednoho pole pro další zpracování.

Syntaxe:

asyncGenerator.toArray()

Příklad: Shromáždění čísel ze streamu do pole.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  const numberArray = await numbers.toArray();

  console.log('Number Array:', numberArray);
}

processNumbers();

Příklad z praxe: Shromáždění všech položek ze stránkovaného API do jednoho pole pro filtrování nebo řazení na straně klienta.

async function* fetchAllItems(apiEndpoint) {
    let pageNumber = 1;
    const pageSize = 100;  // Upravte podle limitů stránkování API

    while (true) {
        const url = `${apiEndpoint}?page=${pageNumber}&pageSize=${pageSize}`;
        const response = await fetch(url);
        const data = await response.json();

        if (!data || data.length === 0) {
            break; // Žádná další data
        }

        for (const item of data) {
            await new Promise(resolve => setTimeout(resolve, 50));
            yield item;
        }

        pageNumber++;
    }
}

async function processAllItems() {
    const apiEndpoint = 'https://api.example.com/items';
    const allItems = fetchAllItems(apiEndpoint);
    const itemsArray = await allItems.toArray();

    console.log(`Fetched ${itemsArray.length} items.`);
    // Další zpracování lze provést na `itemsArray`
}

8. `forEach()`

Pomocná funkce forEach() provede zadanou funkci jednou pro každou hodnotu v asynchronním generátoru. Na rozdíl od jiných pomocných funkcí forEach() nevrací nový asynchronní generátor; používá se k provádění vedlejších efektů na každé hodnotě.

Syntaxe:

asyncGenerator.forEach(callback)

Příklad: Zápis každého čísla ve streamu do konzole.

async function* generateNumbers(start, end) {
  for (let i = start; i <= end; i++) {
    await new Promise(resolve => setTimeout(resolve, 200));
    yield i;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1, 5);
  await numbers.forEach(async (num) => {
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log('Number:', num);
  });
}

processNumbers();

Příklad z praxe: Odesílání aktualizací v reálném čase do uživatelského rozhraní, jak jsou data zpracovávána ze streamu.

async function* fetchRealTimeData(dataSource) {
    //Simulace načítání dat v reálném čase (např. ceny akcií).
    const dataStream = [
      { timestamp: new Date(), price: 100 },
      { timestamp: new Date(), price: 101 },
      { timestamp: new Date(), price: 102 }
    ];
    for (const dataPoint of dataStream) {
      await new Promise(resolve => setTimeout(resolve, 500));
      yield dataPoint;
    }
}

async function updateUI() {
  const realTimeData = fetchRealTimeData('stock-api');
  await realTimeData.forEach(async (data) => {
    //Simulace aktualizace UI
    await new Promise(resolve => setTimeout(resolve, 100));
    console.log(`Updating UI with data: ${JSON.stringify(data)}`);
    // Kód pro skutečnou aktualizaci UI by byl zde.
  });
}

Kombinování Async Generator Helpers pro komplexní datové pipelines

Skutečná síla Async Generator Helpers spočívá v jejich schopnosti řetězit je dohromady a vytvářet tak komplexní datové pipelines. To vám umožňuje provádět více transformací a operací na asynchronním streamu stručným a čitelným způsobem.

Příklad: Filtrování streamu čísel, aby obsahoval pouze sudá čísla, následné umocnění na druhou a nakonec výběr prvních 3 výsledků.

async function* generateNumbers(start) {
  let i = start;
  while (true) {
    await new Promise(resolve => setTimeout(resolve, 100));
    yield i++;
  }
}

async function processNumbers() {
  const numbers = generateNumbers(1);

  const processedNumbers = numbers
    .filter(async (num) => num % 2 === 0)
    .map(async (num) => num * num)
    .take(3);

  for await (const num of processedNumbers) {
    console.log(num);
  }
}

processNumbers();

Příklad z praxe: Načítání uživatelských dat, filtrování uživatelů podle jejich lokality, transformace jejich dat tak, aby obsahovala pouze relevantní pole, a následné zobrazení prvních 10 uživatelů na mapě.

async function* fetchUsers() {
  // Simulace načítání uživatelů z databáze nebo API
  const users = [
    { id: 1, name: 'John Doe', location: 'New York', email: 'john.doe@example.com' },
    { id: 2, name: 'Jane Smith', location: 'London', email: 'jane.smith@example.com' },
    { id: 3, name: 'Ken Tan', location: 'Singapore', email: 'ken.tan@example.com' },
    { id: 4, name: 'Alice Jones', location: 'New York', email: 'alice.jones@example.com' },
    { id: 5, name: 'Bob Williams', location: 'London', email: 'bob.williams@example.com' },
    { id: 6, name: 'Siti Rahman', location: 'Singapore', email: 'siti.rahman@example.com' },
    { id: 7, name: 'Ahmed Khan', location: 'Dubai', email: 'ahmed.khan@example.com' },
    { id: 8, name: 'Maria Garcia', location: 'Madrid', email: 'maria.garcia@example.com' },
    { id: 9, name: 'Li Wei', location: 'Shanghai', email: 'li.wei@example.com' },
    { id: 10, name: 'Hans Müller', location: 'Berlin', email: 'hans.muller@example.com' },
    { id: 11, name: 'Emily Chen', location: 'Sydney', email: 'emily.chen@example.com' }
  ];

  for (const user of users) {
    await new Promise(resolve => setTimeout(resolve, 50));
    yield user;
  }
}

async function displayUsersOnMap(location, maxUsers) {
  const users = fetchUsers();

  const usersForMap = users
    .filter(async (user) => user.location === location)
    .map(async (user) => ({
      id: user.id,
      name: user.name,
      location: user.location
    }))
    .take(maxUsers);

  console.log(`Displaying up to ${maxUsers} users from ${location} on the map:`);
  for await (const user of usersForMap) {
    console.log(user);
  }
}

// Příklady použití:
displayUsersOnMap('New York', 2);
displayUsersOnMap('London', 5);

Polyfilly a podpora prohlížečů

Podpora pro Async Generator Helpers se může lišit v závislosti na prostředí JavaScriptu. Pokud potřebujete podporovat starší prohlížeče nebo prostředí, možná budete muset použít polyfilly. Polyfill poskytuje chybějící funkcionalitu implementací v JavaScriptu. Pro Async Generator Helpers je k dispozici několik knihoven s polyfilly, například core-js.

Příklad s použitím core-js:

// Import nezbytných polyfillů
require('core-js/features/async-iterator/map');
require('core-js/features/async-iterator/filter');
// ... importujte další potřebné pomocné funkce

Zpracování chyb

Při práci s asynchronními operacemi je klíčové správně zpracovávat chyby. S Async Generator Helpers lze zpracování chyb provádět pomocí bloků try...catch uvnitř asynchronních funkcí použitých v pomocných funkcích.

Příklad: Zpracování chyb při načítání dat v rámci operace map().

async function* fetchData(urls) {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      const data = await response.json();
      yield data;
    } catch (error) {
      console.error(`Error fetching data from ${url}: ${error}`);
      yield null; // Nebo chybu zpracujte vhodným způsobem, např. poskytnutím objektu chyby
    }
  }
}

async function processData() {
  const urls = [
    'https://api.example.com/data1',
    'https://api.example.com/data2',
    'https://api.example.com/data3'
  ];

  const dataStream = fetchData(urls);

  const processedData = dataStream.map(async (data) => {
    if (data === null) {
      return null; // Přenesení chyby
    }
    // Zpracování dat
    return data;
  });

  for await (const item of processedData) {
    if (item === null) {
      console.log('Skipping item due to error');
      continue;
    }
    console.log('Processed Item:', item);
  }
}

processData();

Doporučené postupy a úvahy

• Líné vyhodnocování (Lazy Evaluation): Async Generator Helpers jsou vyhodnocovány líně, což znamená, že zpracovávají data pouze tehdy, když jsou vyžádána. To může zlepšit výkon, zejména při práci s velkými datovými sadami.
• Zpracování chyb: Vždy správně zpracovávejte chyby v asynchronních funkcích použitých v pomocných funkcích.
• Polyfilly: V případě potřeby použijte polyfilly pro podporu starších prohlížečů nebo prostředí.
• Čitelnost: Používejte popisné názvy proměnných a komentáře, aby byl váš kód čitelnější a udržitelnější.
• Výkon: Mějte na paměti výkonnostní důsledky řetězení více pomocných funkcí. Ačkoli lenost pomáhá, nadměrné řetězení může stále představovat určitou režii.

Závěr

JavaScript Async Generator Helpers poskytují výkonný a elegantní způsob, jak vytvářet, transformovat a spravovat asynchronní datové streamy. Využitím těchto pomocných funkcí mohou vývojáři psát stručnější, čitelnější a udržitelnější kód pro zpracování složitých asynchronních operací. Pochopení základů asynchronních generátorů a iterátorů, spolu s funkcemi každé pomocné funkce, je nezbytné pro efektivní využití těchto nástrojů v reálných aplikacích. Ať už budujete datové pipelines, zpracováváte data v reálném čase nebo pracujete s asynchronními odpověďmi API, Async Generator Helpers mohou výrazně zjednodušit váš kód a zlepšit jeho celkovou efektivitu.